﻿<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" class="lang-en">
  <head>
    <meta charset="UTF-8">
    <title>Icons are Missing or Broken - Help | Genki Study Resources</title>
    <meta name="title" content="Icons are Missing or Broken - Help | Genki Study Resources">
    <meta name="twitter:title" content="Icons are Missing or Broken - Help | Genki Study Resources">
    <meta property="og:title" content="Icons are Missing or Broken - Help | Genki Study Resources">
    <meta name="description" content="When using Genki Study Resources offline, some browsers (namely Firefox >_>) are paranoid and will not let you access local files, such as fonts. This guide will walk you through how to fix that issue.">
    <meta property="og:description" content="When using Genki Study Resources offline, some browsers (namely Firefox >_>) are paranoid and will not let you access local files, such as fonts. This guide will walk you through how to fix that issue.">
    <link rel="shortcut icon" type="image/x-icon" href="../../resources/images/genkico.ico">

    <meta name="keywords" content="FontAwesome, Icons, Missing, Broken, Firefox, Help, Guide, Tutorial, Japanese" lang="en">
    <meta name="language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta property="og:site_name" content="sethclydesdale.github.io">
    <meta property="og:url" content="https://sethclydesdale.github.io/genki-study-resources/help/broken-icons/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://sethclydesdale.github.io/genki-study-resources/resources/images/genki-thumb.png">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:creator" content="@SethC1995">

    <link rel="stylesheet" href="../../resources/css/stylesheet.min.css">
    <script src="../../resources/javascript/head.min.js"></script>
    <script src="../../resources/javascript/ga.js" async></script>
  </head>

  <body>
    
    <header>
      <h1><a href="../../" id="home-link">Genki Study Resources</a></h1>
      <a id="fork-me" href="https://github.com/SethClydesdale/genki-study-resources">Fork Me</a>
    </header>
    
    <div id="announcement">
      <div id="announce-inner">
        <h3><i class="fa">&#xf0a1;</i> News and Info</h3>
        <div id="announce-list">
          <div id="announcement-controls" style="display:none;">
            <button class="button announce-controls button-left" onclick="GenkiAnn.next(-1, true);"><i class="fa">&#xf060;</i></button>
            <button class="button announce-controls button-right" onclick="GenkiAnn.next(+1, true);"><i class="fa">&#xf061;</i></button>
          </div>
          <noscript><div class="announcement">Please enable JavaScript to get the latest news and info.</div></noscript>
        </div>
      </div>
    </div>
    
    <div id="content">
      <div class="content-block">
        <h2 class="title center" id="genki-icon-help">Icons are Missing or Broken</h2>
        <p>When using Genki Study Resources offline, some browsers (namely Firefox >_>) are paranoid and will not let you access local files, such as fonts. This in turn causes font-based icons to appear broken.</p>
        
        <div class="center"><a href="../../resources/images/general/broken-font.png" target="_blank"><img src="../../resources/images/general/broken-font.png" alt="broken icons"></a></div>
        
        <p>Thankfully this can easily be fixed by simply installing the font on your computer. If you already <a href="../../download/">downloaded Genki Study Resources</a>, the font has been downloaded as well. Follow the instructions below to install this font on your computer.</p>
      </div>
      
      <div class="content-block">
        <h3 class="section-title" id="installing-fonts">Installing FontAwesome Locally</h3>
        <p>To install FontAwesome (the font used for icons) open the <b>genki-study-resources-master</b> folder and navigate to <b>resources > fonts</b>. The font file you want to install on your computer is <a href="../../resources/images/general/fa-help.png" target="_blank">fontawesome-webfont.ttf</a>. If you can't find it, simply <a href="../../resources/fonts/fontawesome-webfont.ttf">click here</a> to download it.<br><br>Once you have the font file, you just need to install it on your computer. If you don't know how to install a font, follow the links below depending on your operating system. They'll teach you how to install a font.</p>
        <ul>
          <li><a href="https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows">Windows</a> (FYI: you can just drag the font file to the font window/folder to install it)</li>
          <li><a href="https://support.apple.com/en-us/HT201749">Mac</a></li>
          <li><a href="https://itsfoss.com/install-fonts-ubuntu/">Ubuntu</a></li>
        </ul>
        <p><b>Important:</b> After installing the font you may need to restart your browser and clear its cache. After that you should see all those awesome icons!</p>
      </div>
        
      <div class="content-block">
        <h3 class="section-title" id="install-failed">Icons are Still Broken</h3>
        <p>If you're still having trouble with the icons not displaying properly, please <a href="https://github.com/SethClydesdale/genki-study-resources/issues">open a new issue on GitHub</a>, so that we can assist you.</p>
      </div>
    </div>
    
    <footer class="clear">
      <ul class="footer-left">
        <li><a href="../../" id="footer-home">Home</a></li>
        <li><a href="../../privacy/">Privacy</a></li>
        <li><a href="../../report/">Report a Bug</a></li>
        <li><a href="../../help/">Help</a></li>
        <li><a href="../../donate/">Donate</a></li>
      </ul>
      
      <ul class="footer-right">
        <li>Created by <a href="https://github.com/SethClydesdale">Seth Clydesdale</a> and the <a href="https://github.com/SethClydesdale/genki-study-resources/graphs/contributors">GitHub Community</a></li>
      </ul>
    </footer>
    
    <script src="../../resources/javascript/all.min.js"></script>
    <script src="../../resources/javascript/genki.min.js"></script>
  </body>
</html>